<template>
	<view class="pt-20px">
		<view class="card h-140px mx-20px p-20px gradient-bg rounded-20px text-center flex flex-y color-white relative">
			<view class="leading-80px">
				￥ <text class="text-40px mr-10px">5556.60</text>
				<image src="../../static/business-icon/icon-arrow-right.svg" mode=""
					class="w-30px h-30px mr-10px color-white"></image>
			</view>
			<text>当前可提现余额</text>
			<view class="withdrawList absolute px-20px py-8px right-0px top-70px flex flex-y-center text-24px"
				@click="gotoWithdrawMoneyInfo">
				<image src="../../static/business-icon/icon-tixian.svg" mode=""
					class="w-30px h-30px mr-10px color-white"></image>
				提现明细
			</view>
		</view>

		<view class="bg-white mt-20px p-30px">
			<view class="p-20px flex flex-x-between bg-f1f1f1 rounded-40px">
				<text class="color-blue">转款渠道</text>
				<text>余利宝</text>
			</view>

			<view class="mt-50px">
				<view>提现金额(元)</view>
				<view class="mt-30px">
					<uv-input placeholder="请输入内容" border="bottom">
						<template v-slot:prefix>
							<text class="text-40px">￥</text>
						</template>
						<template v-slot:suffix>
							<text class="color-666">全部提现</text>
						</template>
					</uv-input>

					<view class="mt-40px">
						<uv-button type="primary" shape="circle" text="确认提现"></uv-button>
					</view>
				</view>

			</view>
		</view>
	</view>

	<BackWorkSpace></BackWorkSpace>
</template>

<script setup name="WithdrawMoney">
	import BackWorkSpace from '@/components/BackWorkSpace.vue'

	const gotoWithdrawMoneyInfo = () => {
		uni.$uv.route({
			url: '/pages/WithdrawMoneyInfo/WithdrawMoneyInfo'
		})
	}
</script>

<style lang="scss">
	page {
		background: rgb(244, 243, 248);
	}

	.gradient-bg {
		background: linear-gradient(45deg, rgb(255, 120, 142), rgb(255, 121, 138), rgb(254, 127, 86));
	}

	.withdrawList {
		background: rgb(255, 77, 79);
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}
</style>